<template>
  <div class="manage-container">
    <el-table :data="tableData" style="width: 80%; height: 90%;">
      <el-table-column fixed prop="songid" label="ID" width="60" align="center"/>
      <el-table-column prop="name" label="songname" align="center"/>
      <el-table-column prop="singerid" label="singerid" width="120" align="center"/>
      <el-table-column prop="singername" label="singername" width="150" align="center"/>
      <el-table-column prop="albumid" label="albumid" width="120" align="center"/>
      <el-table-column prop="albumname" label="albumname" width="150" align="center"/>
      <el-table-column prop="isactive" label="isactive" width="120" align="center"/>
      <el-table-column fixed="right" label="Operations" width="120" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)"
            >edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogShow" width="40%">
      <el-form label-width="120px" :model="form" style="width: 80%;">
        <el-form-item label="Songname">
          <el-input v-model="form.songname"></el-input>
        </el-form-item>
        <el-form-item label="Albumid">
          <el-select v-model="form.albumid">
            <el-option label="1" value=1 />
            <el-option label="2" value=2 />
            <el-option label="3" value=3 />
            <el-option label="4" value=4 />
            <el-option label="5" value=5 />
            <el-option label="6" value=6 />
            <el-option label="7" value=7 />
            <el-option label="8" value=8 />
            <el-option label="9" value=9 />
            <el-option label="10" value=10 />
          </el-select>
        </el-form-item>
        <el-form-item label="Albumname">
          <el-input v-model="form.albumname"></el-input>
        </el-form-item>
        <el-form-item label="Isactive">
          <el-select v-model="form.isactive">
            <el-option label="true" value=true />
            <el-option label="false" value=false />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">Submit</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'review',
  data() {
    return {
      tableData: [],
      dialogShow: false,
      form: {},
    }
  },
  props:{
    currentUserId: { type:Number }
  },
  methods: {
    handleEdit(row) {
      console.log(row)
      this.form.songid = row.songid
      this.form.songname = row.name
      this.form.albumid = row.albumid
      this.form.albumname = row.albumname
      this.form.isactive = row.isactive
      this.dialogShow = true
    },
    handleSubmit() {
      let params = {
        songid: this.form.songid,
        songname: this.form.songname,
        albumid: this.form.albumid,
        albumname: this.form.albumname,
        isactive: this.form.isactive=='true' ? true : false
      }
      axios({
        method: 'post',
        url: '/api/updateSongsBySongId',
        params: params
      }).then((res) => {
        if (res.data.success) {
          ElMessage({
            'message': 'updated',
            'type': 'success'
          })
          this.dialogShow = false
          this.refreshTabledata()
        }
      })
    },
    refreshTabledata() {
      axios({
        method: 'get',
        url: '/api/getSongsBySingerId',
        params: {
          singerid: this.currentUserId
        }
      }).then((res) => {
        if (res.data.success) {
          this.tableData = res.data.data
        }
      })
    }
  },
  mounted() {
    axios({
      method: 'get',
      url: '/api/getSongsBySingerId',
      params: {
        singerid: this.currentUserId
      }
    }).then((res) => {
      if (res.data.success) {
        this.$nextTick(() => {
          this.tableData = res.data.data
        })
      }
    })
  }
}
</script>

<style>
.manage-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>